<template>
    <div class="all">
        <!-- <div style="text-align:center;font-size:28px;font-weight:bold;">{{$route.name}}</div> -->
        <!-- <div class="btn">
            <el-button
                v-if="phoneState == 0"
                size="medium"
                type="primary"
                @click="endphone()"
            >活动已开启</el-button>
            <el-button
                v-if="phoneState == 1"
                size="medium"
                type="primary"
                @click="startphone()"
            >活动已停止</el-button>
        </div>-->
        <div class="table">
            <!-- 表格 -->
            <el-table
                :data="phoneTable"
                border
                :style="{width:screenWidth+'px'}"
                :cell-style="cellStyle"
                height="700"
                :header-cell-style="rowClass"
                @selection-change="allSelectionChange"
            >
                <!-- <el-table-column type="selection" width="60px"></el-table-column> -->
                <el-table-column type="index" label="序号" width="80px"></el-table-column>
                <el-table-column label="作用" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.role }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="电话号" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.phone }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="是否启用" width="160px">
                    <template slot-scope="scope">
                        <span>{{ arrstate[scope.row.state] }}</span>
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip label="备注" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.note }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="100px" v-if="jurisdiction.update_state === 1">
                    <template slot-scope="scope">
                        <el-button
                            size="small"
                            type="primary"
                            @click="edit(scope.$index, scope.row)"
                        >修改</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination
                @size-change="pageCount"
                @current-change="currentPageCount"
                :current-page="currentPage"
                :page-sizes="[100, 500,1000,1500, 2000]"
                :page-size="currentCount"
                layout="prev, pager, next, jumper, sizes,total"
                :total="pageResultSize"
            ></el-pagination>
        </div>
        <div>
            <!-- 修改对话框 -->
            <el-dialog title="修改" width="400px" :visible.sync="editVisible" center @close="closeEdit">
                <el-form :model="editphone">
                    <el-form-item label="电话号：" :label-width="formLabelWidth">
                        <el-input v-model="editphone.phone" placeholder="请输入电话号"></el-input>
                    </el-form-item>
                    <el-form-item label="是否启用：" :label-width="formLabelWidth">
                        <el-radio v-model="editphone.state" label="1">启用</el-radio>
                        <el-radio v-model="editphone.state" label="0">禁止</el-radio>
                    </el-form-item>
                    <el-form-item label="备注：" :label-width="formLabelWidth">
                        <el-input
                            type="textarea"
                            :autosize="{ minRows: 4, maxRows: 6}"
                            v-model="editphone.note"
                            placeholder="请输入备注"
                        ></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer">
                    <el-button @click="cancelEdit">取 消</el-button>
                    <el-button type="primary" @click="confirmEdit">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import echarts from "echarts";
import "../../../static/scss/page.scss";
import utils from "../../util/request";
export default {
    data() {
        return {
            jurisdiction: null,
            phoneState: 0, //当前活动状态：0：开启，1：结束
            // 分页
            currentPage: 1, //初始页面
            currentCount: 100, //当前页面的数据数量
            pageResultSize: 10, //表格数据总数
            screenWidth: window.innerWidth, //可视宽度
            editVisible: false, //修改对话框
            formLabelWidth: "100px", //对话框的label宽度
            showState: false, //显示是否启用的修改
            arrstate: ["禁用","启用"],
            editphone: {
                // 修改对话框
                index: "", //修改的index
                role: "", //作用
                phone: "", //电话号
                state: "", //是否启用
                note: "" //备注
            },
            phoneTable: [
                {
                    role: "客服电话", //作用
                    phone: "400-0000000", //电话号
                    state: "", //是否启用
                    note: "总的服务电话" //备注
                },
                {
                    role: "退款验证电话号", //作用
                    phone: "17777777777", //电话号
                    state: "", //是否启用
                    note: "" //备注
                },
                {
                    role: "价格修改验证", //作用
                    phone: "", //电话号
                    state: "禁止", //是否启用
                    note: "包括充值模式和洗车价格" //备注
                },
                {
                    role: "客服修改汽车信息", //作用
                    phone: "", //电话号
                    state: "启用", //是否启用
                    note: "" //备注
                }
            ]
        };
    },
    methods: {
        searchClick() {
            // 查询
            let data = {page:this.currentPage,list_rows:this.currentCount};
            utils.request("/phone/list","post",JSON.stringify(data)).then(resp=>{
                console.log(resp)
                this.phoneTable = resp.data.data.data;
                this.pageResultSize = resp.data.data.total;
            })
        },
        endphone() {
            // 开启活动时点击按钮要关闭活动
            this.phoneState = 1; //关闭活动
        },
        startphone() {
            //结束活动时点击按钮要开启活动
            this.phoneState = 0; //开启活动
        },
        edit(index, row) {
            // 修改
            this.editVisible = true;
            this.editphone.index = index;
            this.editphone.id = row.id;
            this.editphone.role = row.role;
            this.editphone.phone = row.phone;
            this.editphone.note = row.note;
            this.editphone.state = String(row.state);
            console.log(this.editphone)
            // if (index == 2 || index == 3) {
            //     this.showState = true;
                
            // } else {
            //     this.showState = false;
            // }
        },
        confirmEdit() {
            // 确认修改对话框
            let data = {};
            for(var i in this.editphone) this.editphone[i] !== "" && i !== "index" ? data[i] = this.editphone[i] : "";
            utils.request("/phone/update","post",JSON.stringify(data)).then(resp=>{
                console.log(resp)
                if(resp.data.code === 200){
                    let key = this.editphone.index;
                    this.phoneTable.splice(key,1,data)
                    this.editVisible = false;
                    this.$message({
                        message: "修改成功！",
                        type: "success"
                    })
                }else{return}
            })
            // this.editVisible = false;
            // this.showState = false; //显示是否启用修改
            // if (this.editphone.index == 0) {
            //     // 客服电话
            //     utils
            //         .request("setting", "put", {
            //             settingId: 1,
            //             consumer: this.editphone.phone, //电话
            //             consumernote: this.editphone.note //备注
            //         })
            //         .then(res => {
            //             console.log(res);
            //             if (res.data.code == 20000) {
            //                 this.$message({
            //                     type: "success",
            //                     message: "修改成功!"
            //                 });
            //                 this.editVisible = false;
            //                 this.searchClick();
            //             }
            //         });
            // } else if (this.editphone.index == 1) {
            //     // 退款验证电话号
            //     utils.request("setting", "put", {
            //             settingId: 1,
            //             refundPrice: this.editphone.phone, //电话
            //             refundnote: this.editphone.note //备注
            //     }).then(res => {
            //         console.log(res);
            //         if (res.data.code == 20000) {
            //             this.$message({
            //                 type: "success",
            //                 message: "修改成功!"
            //             });
            //             this.editVisible = false;
            //             this.searchClick();
            //         }
            //     });
            // } else if (this.editphone.index == 2) {
            //     // 价格修改验证
            //     utils
            //         .request("setting", "put", {
            //             settingId: 1,
            //             priceModification: this.editphone.phone, //电话
            //             priceState: this.editphone.state, //是否启用
            //             pricenote: this.editphone.note //备注
            //         })
            //         .then(res => {
            //             console.log(res);
            //             if (res.data.code == 20000) {
            //                 this.$message({
            //                     type: "success",
            //                     message: "修改成功!"
            //                 });
            //                 this.editVisible = false;
            //                 this.searchClick();
            //             }
            //         });
            // } else if (this.editphone.index == 3) {
            //     // 客服修改汽车信息
            //     utils
            //         .request("setting", "put", {
            //             settingId: 1,
            //             updateCar: this.editphone.phone, //电话
            //             updateState: this.editphone.state, //是否启用
            //             updatenote: this.editphone.note //备注
            //         })
            //         .then(res => {
            //             console.log(res);
            //             if (res.data.code == 20000) {
            //                 this.$message({
            //                     type: "success",
            //                     message: "修改成功!"
            //                 });
            //                 this.editVisible = false;
            //                 this.searchClick();
            //             }
            //         });
            // }
        },
        cancelEdit() {
            // 取消修改对话框
            this.editVisible = false;
            this.showState = false; //显示是否启用修改
        },
        closeEdit() {
            // 关闭修改对话框
            this.editVisible = false;
            this.showState = false; //显示是否启用修改
        },
        //   表格居中
        cellStyle: function({ row, column, rowIndex, columnIndex }) {
            return "text-align:center;";
        },
        rowClass: function({ row, rowIndex }) {
            return "text-align:center;";
        },
        allSelectionChange: function(val) {
            // 获取选中的内容
            console.log(val);
            this.selectTable = val;
        },
        // 每页数据的数量
        pageCount: function(val) {
            this.currentCount = val;
            this.searchClick()
        },
        // 点击的第几页
        currentPageCount: function(val) {
            this.currentPage = val;
            this.searchClick()
        }
    },
    mounted() {},
    created() {
        let Base64 = require("js-base64").Base64;
        let menuarr = JSON.parse(Base64.decode(sessionStorage.getItem("menuarr")))
        for(var i=0;i<menuarr.length;i++){
            // console.log(menuarr[i].link)
            if(menuarr[i].link === this.$route.path){
                this.jurisdiction = menuarr[i]
            }else{}
        }
        this.searchClick()
        // let data = {
        //     role: "售后",
        //     phone: '98765432100',
        //     state: "1",
        //     note: "321"
        // };
        // utils.request("/phone/add","post",JSON.stringify(data)).then(resp=>{
        //     console.log(resp)
            
        // })
    }
};
</script>




